import {View, Image, Text} from '@tarojs/components'
import {useEffect} from 'react'
import {inject, observer} from 'mobx-react'
import {IMG_URL} from '@/commons/constant'
import './goods.scss'

export default inject('store')(observer(props => {
  const {goodsStore} = props.store
  const {search, onClick} = props
  useEffect(() => {
    goodsStore.getGoodsList(search)
    return undefined
  }, [search])

  // useEffect(() => {
  //   console.log(...list);
  //   const newList = list
  //   console.log(newList);
  //   goodsStore.list.length && newList.push(...goodsStore.list)
  //   setList(newList)
  //   return undefined
  // }, [goodsStore.list])

  const goodsItem = () => (
    goodsStore.totalList.map(item => (
      <View className="goods-item" key={item.id} onClick={() => onClick(item)} >
        <Image className="img" src={IMG_URL + item.img} alt="" />
        <View className="content">
          <View className={item.active ? 'title1' : 'title2'}>{item.title}</View>
          <Text hidden={item.active} className={item.active && 'active'}>{item.active}</Text>
          <View className="last">
            <Text className="price">￥{item.price}</Text>
            <Text className="sales">销量<Text className="small-sales">{item.sales}</Text> </Text>
          </View>
        </View>
      </View>
    ))
  )
  return (
    <View className="goods">
      {goodsItem()}
    </View>
  )
}))